<template>
	<view class="refund_details">
		<view class="refund_mount"> 
			<text>退款金额 : </text> ￥{{orderInfo.refund_price}}
		</view> 
		<view class="refund_con">
			<text>退款</text>
			<view class="con_list">
				<text>退款原因: </text>
				<text> {{orderInfo.refund_reason_wap}} </text>
				<!-- <image :src="orderInfo.refund_reason_wap_img" mode=""></image> -->
			</view>
			<view class="con_list">
				<text>退款金额: </text>
				<text> {{orderInfo.refund_price}} </text>
			</view>
			<view class="con_list">
				<text>申请时间: </text>
				<text> {{orderInfo.refund_reason_time}}  </text>
			</view>
			<view class="con_list">
				<text>说明图片: </text>
				<image :src="orderInfo.refund_reason_wap_img" mode=""></image>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="select_type" v-show="isShowSelectType" @click="downSelectType(false)">
			<view class="select_type_item">
				<!-- 确认退款 -->
				<view class="select_cont" @click.stop v-show="selectType == 'confirm'">
					<view class="ref_single">
						<text>退款单号</text>
						<text>{{orderId}}</text>
					</view>
					<view class="ref_mount">
						<text>退款金额</text> 
						<input class="ref_mount_inp" type="text" v-model="refMount" >
					</view>
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value" style="display: flex; font-size: 26rpx; height: 80rpx; line-height: 80rpx;">
							<view>
								<radio :value="item.value" :checked="item.checked" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
				<!-- 拒绝退款 -->
				<view class="select_cont" @click.stop v-show="selectType == 'refuse'">
					<textarea class="textarea" name="" id="" cols="30" rows="10" placeholder="输入不退款原因" v-model="refundReason"></textarea>
				</view>
				<view class="select_xz">
					<text @click.stop="downSelectType(false)">取消</text>
					<text @click.stop="downSelectType(true)">提交</text>
				</view>
			</view>
		</view>
		<view class="refund_btn">
			<text @click="confirm('confirm')">确认退款</text>
			<text @click="refuse('refuse')">拒绝退款</text>
		</view>
	</view>
</template>

<script>
	import {
		notuikuan,
		tuikuan,
		getDetails,
		refund,
		noRefund
	} from '../../../../api/sellOrder.js'
	export default {
		data() {
			return {
				items: [{
						value: '1',
						name: '直接退款',
						checked: 'true'
					},
					{
						value: '2',
						name: '退款(无需退货,并且返回原状态)'
					}
				],
				// 是否展示弹框
				isShowSelectType: false,
				// 弹框类型
				selectType: null,
				// 退款订单号
				orderId:'123123',
				// 不退款原因
				refundReason: '',
				// 退款金额
				refMount: '123',
				type: '1',
				id:'',
				orderInfo:{},
				order_id:''
			};
		},
		onLoad(option) {
			this.$set(this, 'id', option.id)
		},
		onShow() {
			// let that = this
			// uni.$on('updata',(data) => { 
			// 	that.id = data.id,
			// 	that.order_id = data.order_id 
			// })  
			this.detail()
			
		},
		methods: { 
			// 订单详情
			detail() {
				var that = this
				console.log(that.id,123)
				uni.showLoading({
					title: "正在获取订单"
				});
				getDetails(that.id).then(res => {
					uni.hideLoading();
					that.$set(that, 'orderInfo', res.data.result.orderInfo)
					that.$set(that, 'orderId', res.data.result.orderInfo.order_id)
					that.$set(that, 'refMount', res.data.result.orderInfo.refund_price)
				})
			},
			// 确认退款
			confirm(type) {
				this.selectType = type
				this.isShowSelectType = true
				// let id = 80
				// let data = {
				// 	order_id: 'wx62546488634376192',
				// 	refund_price: '10',
				// 	type:1
				// }
				// refund(id,data).then(res => { 
				// 	if(res.data.status == 200){
				// 		this.$util.Tips({ title: res.msg })
				// 		setTimeout(() => {
				// 			uni.redirectTo({
				// 				url:'../index'
				// 			})
				// 		},1000)
				// 	}else{
				// 		this.$util.Tips({ title: res.msg })
				// 	}
				// }) 
			},
			// 拒绝退款弹框
			refuse(type) {
				this.selectType = type
				this.isShowSelectType = true
			},
			downSelectType(type) { 
				// 确认退款提交
				var that = this
				if(this.selectType == 'confirm' && type){
					// 订单号 this.orderId
					// 金额 this.refMount
					// 退款类型 this.type 
					tuikuan(that.orderInfo.id, { id: that.orderInfo.id, order_id: that.orderId, refund_price: that.refMount, type: that.type }).then(res => {
						that.$util.Tips({
							title: res.msg
						})
						uni.navigateBack()
					}).catch( res => {
						that.$util.Tips({
							title: res.msg
						})
					})
					return 
				}else if(this.selectType == 'refuse' && type){
					let id = that.orderInfo.id
					let data = {
						id: that.orderInfo.id,
						order_id: that.orderId,
						refund_reason: this.refundReason
					}
					notuikuan(id, data).then(res => {
							this.$util.Tips({
								title: res.msg
							})
							this.isShowSelectType = false
							this.refundReason = ''
							uni.navigateBack(2)
					})
					return 
				} else{
					this.refundReason = ''
					this.isShowSelectType = false
				}
			},
			radioChange(res){ 
				this.type = res.detail.value
			}
		}
	}
</script>

<style lang="less">
	.refund_details {
		height: 100vh;

		.refund_mount {
			padding: 0 40rpx;
			height: 200rpx;
			line-height: 200rpx;
			font-size: 42rpx;
			color: #e93323;
			border-radius: 20rpx;
			background-color: #fff;

			text {
				color: #333;
			}
		}

		.refund_con {
			margin-top: 20rpx;
			padding: 20rpx;
			height: 400rpx;
			font-size: 38rpx;
			border-radius: 20rpx;
			background-color: #fff;

			.con_list {
				margin-top: 20rpx;
				font-size: 30rpx;
				color: #a6a6a6;
				display: flex;

				& text:nth-child(1) {
					width: 200rpx;
				}
				image{
					height: 100rpx;
					width: 100rpx;
				}
			}
		}

		.refund_btn {
			display: flex;

			text {
				margin: 40rpx;
				width: 50%;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 32rpx;
				color: #fff;
				border-radius: 40rpx;
				background-color: #e93323;
			}

			& text:last-child {
				background-color: #f5f5f5;
				color: #9a9a9a;
				border: 1rpx solid #9a9a9a;
			}
		}

		.select_type {
			position: fixed;
			top: 0;
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, 0.5);

			.select_type_item {
				padding: 40rpx 20rpx;
				position: fixed;
				z-index: 100;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 80%;
				border-radius: 20rpx;
				background-color: #f5f5f5;
			}

			.select_cont {
				position: relative;
				font-size: 34rpx;
				line-height: 100rpx;

				.ref_single,
				.ref_mount {
					margin: 20rpx 0;
					display: flex;
					font-size: 28rpx;
					color: #515a6e;
					height: 60rpx;
					line-height: 60rpx;

					& text:nth-child(2) {
						margin-left: 20rpx;
						width: 76%;
						color: #9b9999;
						background-color: #f3f3f3;
						border: 1px solid #e3e5e8;
					}
				}

				.ref_mount {
					.ref_mount_inp {
						margin: auto 0 auto 20rpx;
						width: 100rpx;
						font-size: 28rpx;
						color: #9b9999;
						border: 1rpx solid #e3e5e8;
					}
				}

				.textarea {
					margin-bottom: 20rpx;
					padding: 20rpx;
					width: 100%;
					font-size: 30rpx;
					height: 280rpx;
					color: #8e8e8e;
					border-radius: 20rpx;
					border: 1px solid #999;
				}
			}

			.select_xz {
				width: 100%;
				display: flex;

				text {
					flex: 1;
					margin: 0 20rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					border-radius: 20rpx;
					color: #fff;
					background-image: linear-gradient(to right, #f62c2c, #f96829);
				}

				& text:last-child {
					background: #22ac38;
				}
			}
		}
	}
</style>
